<template>
  <div>
    <el-drawer :before-close="beforeClose" :title="model|modelTitle" :visible.sync="myValue" direction="rtl" size="30%">
      <el-divider></el-divider>
      <div class="py-2 px-5">
        <el-form ref="formData" :disabled="disabled" :model="formData" size="small" label-width="120px" status-icon>
          <el-form-item label="管理员昵称" prop="nickName" :rules="[{ required: true, message: '昵称不能为空'}]">
            <el-input placeholder="请输入昵称" v-model="formData.nickName"></el-input>
          </el-form-item>
          <el-form-item label="管理员用户名" prop="userName" :rules="[{ required: true, message: '用户名不能为空'}]">
            <el-input placeholder="请输入用户名" v-model="formData.userName"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="password" :rules="[model=='add'?{ required: true, message: '密码不能为空'}:{}]">
            <el-input type="password" :placeholder="model=='edit'?'如不修改请留空':'请输入密码'" v-model="formData.password"></el-input>
          </el-form-item>

          <el-form-item label="分组" prop="groupId">
            <el-select class="w-100" v-model="formData.groupId" placeholder="请选择">
              <el-option v-for="group in groups" :key="group.id" :label="group.groupName" :value="group.id" />
            </el-select>
          </el-form-item>

          <el-form-item label="头像上传" prop="avatar">
            <el-upload class="uploader" :action="$http.defaults.baseURL+'upload'" :show-file-list="false" :on-success="uploadSuccess"
              list-type="picture-card">
              <img v-if="formData.avatar" :src="formData.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item class="mt-4">
            <el-button size="medium" type="primary" @click="submitForm('formData')">提交</el-button>
            <el-button size="medium" @click="resetForm('formData')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>

import form from '@/mixins/form.js'
export default {
  mixins: [form],
  props: {
    value: {
      type: Boolean
    }
  },
  data () {
    return {

      myValue: false,
      disabled: false,
      rowId: 0,
      model: 'add',
      formData: {
        avatar: '',
        groupId: '',
        nickName: '',
        userName: '',
        password: ''
      },

      groups: []
    }
  },
  watch: {
    // 显示
    value (newVal) {
      this.myValue = newVal
    },
    myValue (newVal) {
      this.$emit('input', newVal)
    }
  },

  methods: {

    // 上传成功
    uploadSuccess (response, file, fileList) {
      this.formData.avatar = response.url
    },
    // 获取该条数据信息
    async fetchRow (model, id = 0) {
      let rowResult = {}
      this.model = model
      this.rowId = id
      const group = await this.$http.get(`${this.$api.group}`)
      this.groups = group.data.rows
      switch (model) {
        // 添加
        case 'add':
          this.disabled = false
          break
        case 'edit':
          this.disabled = false
          rowResult = await this.$http.get(`${this.$parent.api}/${this.rowId}`)
          this.formData = rowResult.data
          this.formData.password = ''
          break
        case 'details':
          this.disabled = true
          rowResult = await this.$http.get(`${this.$parent.api}/${this.rowId}`)
          this.formData = rowResult.data
          this.formData.password = ''
          break
      }
    },


  },

}
</script>

